<template>
	<view class="content" :style="{backgroundImage:`url(${indexBackgroundImage})`}">
		<view class="title">
		</view>
		<view class="main">
			<view class="logo">
				<image :src="$isHttp(details.resumePic)" mode=""></image>
			</view>
			<view class="detail">
				<view class="detailTitle">
					<text>{{details.resumeName}} <text class="position">{{details.positionName}}</text></text>
				</view>
        <view class="detailName">
          <view class="detailNameLeft">
            <text class="light">学校</text>
            <input type="text" v-model="details.txtUniversity" placeholder="" disabled placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
          </view>
        </view>
				<view class="detailName">
					<view class="detailNameLeft">
						<text class="light">学历</text>
						<input type="text" placeholder=""
                   v-model="details.txtResumeEducation"
                   disabled placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
					</view>
				</view>
				<view class="detailName">
					<view class="detailNameLeft">
						<text class="light">联系电话</text>
						<input type="text" placeholder=""
                   v-model="details.resumeMobile"
                   disabled placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" @click="onMakePhoneCall(details.resumeMobile)" value="" />
					</view>
				</view>
				<view class="detailName">
					<view class="detailNameLeft">
						<text class="light">{{dataValue.status==='1'?'投递':'面试'}}时间</text>
						<input type="text" :placeholder="dataValue.status==='1'?details.createTime:details.interviewTime" disabled placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
					</view>
				</view>
				<view class="detailName">
					<view class="detailNameLeft">
						<text class="light">面试职位</text>
						<input type="text" :placeholder="details.positionName" disabled placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}" value="" />
					</view>
				</view>
			</view>
			<!--			<view class="jobAddress">-->
			<!--				<view class="jobAddressLeft">-->
			<!--					<text class="light">工作地点</text>-->
			<!--					<input type="text"  :placeholder="details.input"-->
			<!--                 disabled-->
			<!--					placeholder-style="{-->
			<!--						width: 350px;-->
			<!--						font-size: 26rpx;-->
			<!--						font-family: PingFang SC;-->
			<!--						font-weight: bold;-->
			<!--						color: #283D82;-->
			<!--					}"-->
			<!--					value="" />-->
			<!--				</view>-->
			<!--				<u-icon name="close-circle" color="#384B8B" size="28"></u-icon>-->
			<!--			</view>-->
			<view class="buttom">
				<button type="default" v-if="details.status===1" @click="onCompanyInviteDelivery">
					立即邀约
				</button>
				<button type="default" @click="onSend" v-if="details.status===2">
					是否录用
				</button>
				<button type="default" v-if="details.status>2">
					已面试
				</button>
			</view>
		</view>
    <u-picker
        mode="time"
        v-model="active.appointmentstart.show"
        :start-year="active.appointmentstart.startTime"
        :end-year="active.appointmentstart.endTime"
        :default-time="active.appointmentstart.appointmentDate"
        :params="active.appointmentstart.timeParams"
        @confirm="onappActiveStartDataChange"
    ></u-picker>
		<Tabbar :current="2"></Tabbar>
	</view>
</template>

<script>
	import indexBackgroundImage from "@/static/publishPractice/bg1.png"
  import {selectTimeData as selectData,getTimeDate} from '@/utils/utils'
	import {
    companyInviteDelivery,
		comDeliveryInfoDeliveryInfo,
		setDeliveryStatus
	} from '@/api/company'
	export default {
		data() {
			return {
				indexBackgroundImage: indexBackgroundImage,
        dataValue:{},
				details: {}, //数据
        active:{
          //预约
          appointmentstart:{
            ...selectData
          },
        }
			}
		},
		onLoad(opt) {
      this.dataValue = opt
			this.comDeliveryInfoDeliveryInfo(opt.id)
      this.getTimeDates()
		},
		methods: {
      //设置时间操作
      getTimeDates(){
        const {ymd,startTime,endTime} =getTimeDate ()
        const active = this.active
        active.appointmentstart.appointmentDate = ymd
        active.appointmentstart.startTime = startTime
        active.appointmentstart.endTime = endTime
      },
      onActiveTimeChange(e,key='start'){
        const moment = this.$moment()
        const { day, month, year,hour,minute,second } = e
        const time = `${year}-${month}-${day} ${hour}:${minute}:${second}`
        if (time < moment.format('YYYY-MM-DD')) {
          this.$showToast(`不能选择过期的时间,请重新选择`)
          return false
        }
        this.active[key].value = time
        this.active[key].appointmentDate = time
        const interviewTime = this.active[key].value
        const {resumeId,positionId,resumeName,positionName} = this.details
        uni.showModal({
          title: '提示',
          content: `是否邀请${resumeName}参加${positionName}职位进行面试?`,
          success: res=>{
            if (res.confirm) {
              this.companyInviteDelivery({interviewTime,resumeId , positionId})
            } else if (res.cancel) {
              this.$showToast('已取消')
            }
          }
        });
      },
      //预约开始
      onappActiveStartDataChange(e){
        this.onActiveTimeChange(e,'appointmentstart')
      },
      //邀请查看简历
      companyInviteDelivery(data){
        this.$showLoading({
          title:'邀请中...'
        })
        companyInviteDelivery(data).then(res => {
          const {code,result,message}=res
          this.$hideLoading()
          if(code===200){
            this.$showToast(result)
            this.$navigateBack()
          } else {
            this.$showToast(message)
          }
        }).catch(e=>{
          this.$hideLoading()
          console.log ( e )
        })
      },
      //立即邀约
      onCompanyInviteDelivery(){
        this.active.appointmentstart.show=true

      },
			//打电话
			onMakePhoneCall(phoneNumber) {
				this.$onMakePhoneCall(phoneNumber)
			},
			//职位投递详情
			comDeliveryInfoDeliveryInfo(id) {
				comDeliveryInfoDeliveryInfo(id).then(res => {
					this.details = res.result
				}).catch(err => {
					console.log(err)
				})
			},
			//跳转列表对应页面
			nextPage(url) {
				uni.navigateTo({
					url: url,
					fail() {
						uni.switchTab({
							url: url,
							fail() {
								uni.showToast({
									title: '暂未开通，敬请期待！',
									icon: 'none'
								});
							}
						});
					}
				});
			},
			//点击提交
			onSend() {
				if (this.details.status === 2) {
					const deliveryId = this.details.id
					uni.showModal({
						title: '提示',
						content: '是否要录用此用户?',
						success: res => {
							if (res.confirm) {
								this.setDeliveryStatus({
									deliveryId,
									status: 4
								});
							} else if (res.cancel) {
								this.setDeliveryStatus({
									deliveryId,
									status: 3
								});
							}
						}
					});
				}
			},
			setDeliveryStatus({
				deliveryId,
				status = '4'
			}) {
				this.$showLoading({
					title: '正在操作中...'
				})
				setDeliveryStatus({
					deliveryId,
					status
				}).then(res => {
					this.$hideLoading()
					const {
						code,
						message,
						result
					} = res;
					if (code === 200) {
						this.$showToast(result)
						this.$navigateBack()
					} else {
						this.$showToast(message)
					}
				}).catch(e => {
					this.$hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		height: 100%;
		background-repeat: no-repeat;
		background-size: 100%;

		.title {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;

			.u-icon {
				position: absolute;
				height: 100rpx;
				left: 20rpx;
			}

			text {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
			}
		}

		.main {
			height: 100%;
			position: relative;
			margin: 130rpx 36rpx 20rpx 36rpx;
			padding-bottom: 100rpx;

			.logo {
				position: absolute;
				width: 100%;
				top: -70rpx;
				text-align: center;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
			}

			.detail {
				padding: 30px 25rpx 10rpx 25rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.detailTitle {
					text-align: center;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #283D82;

					.position {
						margin-left: 20rpx;
						padding: 0 12rpx;
						background: #F19868;
						border-radius: 18rpx;
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}

				.detailName:nth-child(2) {
					border: 0;
				}

				.detailName {
					margin: 20rpx;
					padding-top: 16rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: #EAEAEA 1rpx solid;

					.detailNameLeft {
						.light {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #646566;
						}

						input {
							width: 350rpx;
						}
					}
				}
			}

			.jobAddress {
				margin-top: 20rpx;
				padding: 15rpx 45rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #FFFFFF;
				border-radius: 20rpx;

				.jobAddressLeft {
					.light {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #646566;
					}

					input {
						width: 350rpx;
					}
				}
			}

			.buttom {
				margin: 20rpx 0;

				button {
					height: 70rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					background: #53B9B2;
					border: #53B9B2;
					border-radius: 40rpx;
				}
			}
		}
	}
</style>
